<template>
	<view class="page-content">
		<view class="content">
			<view class="flex-row justify-between mt-24" v-for="(item,index) in list" :key="index">
				<view class="flex-row items-center group_5">
					<image class="image_3" :src="item.icon" />
					<view class="flex-col ml-9">
						<view class="flex-row items-baseline">
							<text class="font_2 text_2">{{item.title}}</text>
							<text class="ml-8 font_3">+{{item.jifen}} 光芒</text>
						</view>
						<text class="mt-10 font_6 text_4">{{item.des}}</text>
					</view>
				</view>
				<view class="flex-col">
					<view class="flex-row items-center self-stretch">
						<!-- <text class="font_4">0/1</text> -->
						<view class="flex-col justify-start items-center text-wrapper button ml-11">
							<text class="font_5 text_3">去完成</text>
						</view>
					</view>
					<!-- <text class="self-end font_6 text_5 mt-7">签到规则明细</text> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						icon: '/static/common/qiandao.png',
						title: '签到',
						des: '每日签到获取光芒',
						jifen: 5
					},
					{
						icon: '/static/common/fatiezi.png',
						title: '发布帖子',
						des: '发布帖子获取光芒',
						jifen: 5
					},
					{
						icon: '/static/common/plun.png',
						title: '评论帖子',
						des: '评论帖子获取光芒',
						jifen: 2
					},
					{
						icon: '/static/common/share.png',
						title: '分享帖子',
						des: '分享帖子获取光芒',
						jifen: 1
					},
					{
						icon: '/static/common/dianzan.png',
						title: '点赞帖子',
						des: '点赞帖子获取光芒',
						jifen: 1
					},
					{
						icon: '/static/common/cxz.png',
						title: '新增宠行证',
						des: '新增宠行证获取光芒',
						jifen: 50
					},
					{
						icon: '/static/common/haoyou.png',
						title: '邀请好友',
						des: '分享帖子获取光芒',
						jifen: 50
					}
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		padding: 40rpx 22rpx 0 42rpx;

		.content {
			padding: 40rpx 32rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			width: 100%;

			&:first-child {
				margin-top: 0;
			}

			.mt-7 {
				margin-top: 14rpx;
			}

			.ml-9 {
				margin-left: 18rpx;
			}

			.ml-11 {
				margin-left: 22rpx;
			}

			.group_5 {
				margin: 8rpx 0;

				.image_3 {
					width: 80rpx;
					height: 80rpx;
				}

				.font_2 {
					font-size: 28rpx;
					font-family: PingFang SC;
					line-height: 25.76rpx;
					font-weight: 700;
					color: #000000;
				}

				.text_2 {
					line-height: 25.68rpx;
				}

				.font_3 {
					font-size: 24rpx;
					font-family: PingFang SC;
					line-height: 22.12rpx;
					font-weight: 700;
					color: #fb8f10;
				}

				.text_4 {
					line-height: 22.28rpx;
				}
			}

			.font_4 {
				font-size: 28rpx;
				font-family: PingFang SC;
				line-height: 25.76rpx;
				color: #000000;
			}

			.text-wrapper {
				flex-shrink: 0;

				.font_5 {
					font-size: 24rpx;
					font-family: PingFang SC;
					line-height: 22.12rpx;
					font-weight: 700;
					color: #000000;
				}

				.text_3 {
					line-height: 22.48rpx;
				}
			}

			.button {
				padding: 16rpx 0;
				background-color: #fbd610;
				border-radius: 16rpx;
				width: 140rpx;
				height: 56rpx;
			}

			.font_6 {
				font-size: 24rpx;
				font-family: PingFang SC;
				line-height: 22.12rpx;
				color: #666666;
			}

			.text_5 {
				color: #fb8f10;
				line-height: 22.22rpx;
			}
		}

	}
</style>